<template>
	<view>
		<xxm-child @add="onAdd" @change='onChange'></xxm-child>
		<view class="box" :style="{backgroundColor:bgcolor,fontSize:size+'px'}">
			{{num}}

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0,
				bgcolor: 'blue',
				size: '16px'

			}
		},
		methods: {
			onAdd(value) {
				this.num = value
				this.bgcolor = '#' + String(value).substring(3, 6)
			},
			onChange(value) {
				// console.log(value)
				this.size = value

			}

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 200px;
		height: 200px;
	}
</style>